import 'package:flutter/material.dart';
import 'package:flutter_with_bmap/consts/light_diretion.dart';
import 'package:flutter_with_bmap/entity/green_wave.dart';
import 'package:flutter_with_bmap/entity/light_hv.dart';
import 'package:flutter_with_bmap/models/vehicle_hv_info.dart';
import 'package:flutter_with_bmap/pages/home/widgets/light_icon.dart';
import 'package:provider/provider.dart';

class LightSection extends StatefulWidget {
  const LightSection({super.key});

  @override
  State<StatefulWidget> createState() {
    return LightSectionState();
  }
}

class LightSectionState extends State<LightSection> {
  @override
  Widget build(BuildContext context) {
    return Selector(
      builder: ((context, LightHv? lightInfo, child) {
        if (lightInfo == null && child != null) {
          return child;
        }
        return Visibility(
            visible: lightInfo != null,
            child: Container(
                width: 779,
                height: 175,
                decoration: const BoxDecoration(
                    image: DecorationImage(
                        image:
                            AssetImage("flutter_assets/images/lights-bg.png"),
                        fit: BoxFit.cover)),
                child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: lightInfo != null
                        ? lightInfo.phases
                            .map((phase) => Padding(
                                padding: const EdgeInsets.fromLTRB(6, 8, 6, 0),
                                child: Column(children: [
                                  Text(
                                    phase.time.toString(),
                                    style: _Styles.textStyle,
                                  ),
                                  LightIcon(LightDiretion.fromCode(
                                      '${phase.direction}${phase.color}')),
                                  Selector(builder:
                                      ((context, GreenWave? greenWave, child) {
                                    var p =
                                        greenWave?.phases.firstWhere((element) {
                                      return element.direction ==
                                          phase.direction;
                                    });
                                    return Text(
                                      p == null
                                          ? ''
                                          : '${p.guide_speed_min}~${p.guide_speed_max.toString()}',
                                      style: _Styles.textStyle,
                                    );
                                  }), selector: ((BuildContext context,
                                      VehicleHvInfo vehicleHvInfo) {
                                    return vehicleHvInfo.greenWave;
                                  }))
                                ])))
                            .toList()
                        : [])));
      }),
      selector: (BuildContext context, VehicleHvInfo vehicleHvInfo) {
        return vehicleHvInfo.lightInfo;
      },
    );
  }
}

class _Styles {
  static TextStyle textStyle =
      const TextStyle(color: Colors.white, fontSize: 18);
}
